<script>
import { Toast } from 'vant';

export default {
  name: 'industry',
  data() {
    return {
      hintRight: '100px',
      hintTop: '0px',
      isLongPress: false, // 判断是否长按

    };
  },
  methods: {
    clickDot(e) {
      console.log('clickDot',e);
      if (this.isLongPress) {
        this.isLongPress = false;
        return;
      }
      this.isLongPress = true;
      //页面宽度 - 点击的x坐标

      this.hintRight =  document.body.clientWidth - e.x + 'px';
      this.hintTop = e.y + 'px';
    },
    closeHint() {
        this.isLongPress = false;
      Toast({
        message: '删除成功',
        icon:require('./image/success.png'),
      });
    }
  }
};
</script>

<template>
  <frame-view class="index">
<!--    行业前瞻-->
    <div style="padding: 24px 24px 27px;background-color: #fff;border-radius: 20px;margin-top: 16px" v-for="i in 10">
      <div style="display: flex;justify-content: space-between">
        <div style="font-size: 28px;display: flex;align-items: center">
          <img src="./image/群助手@2x.png" style="width: 46px;height: 46px;border-radius:23px " alt="图片" />
          <p style="margin-left: 10px">科技精选</p>
        </div>
        <van-icon name="ellipsis" color="#999999" @click="clickDot"/>
      </div>
      <div style="margin-top: 29px;display: flex;justify-content: space-between">
        <div>
<!--          一行  超出变成...-->
          <p style="font-size: 32px;color: #222222;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 460px;font-weight: 500;">
            文章标题（最多一行,超过打111111111111
          </p>
<!--          两行 超出变成...-->
          <p style="color: rgba(0,0,0,.5);overflow: hidden;text-overflow: ellipsis;white-space: normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;width: 460px;margin-top: 17px">
            中国科技公司在美国上市，为什么总是被美国政府打压？1111111111111111111111111111
          </p>


        </div>
        <img src="./image/kj.png" style="width: 148px;height: 148px" alt="图片" />

      </div>

    </div>
    <div class="hint" :style="{right:hintRight,top:hintTop}" v-show="isLongPress">
      <p @click="closeHint">
        拒收此类消息
      </p>
      <p @click="closeHint">
        删除
      </p>

    </div>
  </frame-view>
</template>

<style scoped lang="scss">
.hint {
  padding: 0 24px;
  font-size: 28px;
  color: #191919;
  position: fixed;
  display: inline-block;
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  background-color: #fff;
  p{
    line-height: 88px;height: 88px;border-bottom: 1px solid #E5E5E5;display: flex;justify-content: left;align-items: center;
    //最后一个不要下边框
    &:last-child{
      border-bottom: none;
    }
  }
  //点击后背景变色
  p:active{
    background-color: #f7f7f7;
  }
}

</style>
